import React, {useEffect, useState} from "react";
import {Col, Form, Input, message, Modal, Radio, Row, Spin} from "antd";
import {httpPost, ResponseData} from "../../../utils/https";
import {CustomizeFields} from "./index";
import {useSelector} from "../../../hooks/useRedux";
import styled from "@emotion/styled";

interface FormProps {
    data?: CustomizeFields;
    visible: boolean;
    onCancel: () => void;
}

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};

export const CustomizeCreate: React.FC<FormProps> = ({visible, onCancel, data}) => {

    const [spinning, setSpinning] = useState<boolean>(false)

    let group = useSelector((state) => state.customize.group);

    const [form] = Form.useForm()

    const saveServer = () => {
        const url: string = data === undefined ? '/customize/add' : '/customize/add?id=' + data.id

        form.validateFields().then(values => {
            setSpinning(true)
            httpPost<ResponseData<string>, any>(url, {...values, group_id: group.id}).then(res => {
                setSpinning(false)
                if (res.code === '001001200') {
                    message.success(res.msg)
                    onCancel()
                } else {
                    message.error(res.msg)
                }
            })
        })
    }

    return <Container
        width={1000}
        destroyOnClose
        maskClosable={false}
        visible={visible}
        title="增加服务"
        okText="保存"
        cancelText="取消"
        onOk={saveServer}
        onCancel={onCancel}
    >
        <Spin tip="正在保存......" spinning={spinning}>
            <Form
                {...layout}
                form={form}
                layout="horizontal"
            >
                <Row>
                    <Col span={11}>
                        <Form.Item name="title" label="服务名称" initialValue={data?.title} rules={[{required: true, message: '请输入服务名称'}]}>
                            <Input placeholder="服务名称" />
                        </Form.Item>
                        <Form.Item name="desc" label="服务描述" initialValue={data?.desc}>
                            <Input.TextArea rows={3} placeholder="服务描述" />
                        </Form.Item>
                        <Form.Item name="base_path" label="基础路径" initialValue={data?.base_path} tooltip="服务的根路径" rules={[{required: true, message: '请输入服务的根路径'}]}>
                            <Input placeholder="基础路径" />
                        </Form.Item>
                        <Form.Item name="log_path" label="日志路径" initialValue={data?.log_path} tooltip="用于读取执行日志">
                            <Input placeholder="日志路径" />
                        </Form.Item>
                        <Form.Item name="linking" label="访问路径" initialValue={data?.linking} tooltip="如果存在访问路径，请填写">
                            <Input placeholder="访问路径" />
                        </Form.Item>
                        <Form.Item name="exec_way" label="执行方式" initialValue={data?.exec_way} tooltip="通过命令执行/执行shell脚本">
                            <Radio.Group value={data?.exec_way}>
                                <Radio value={'command'}>shell命令</Radio>
                                <Radio value={'script'}>shell脚本</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name="log_type" label="日志类型" initialValue={data?.log_type}>
                            <Radio.Group value={data?.log_type}>
                                <Radio value="static">静态日志</Radio>
                                <Radio value="real_time">实时日志</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name="log_read_line" label="最大读取" initialValue={data?.log_read_line} style={{marginBottom: 0}}>
                            <Input suffix="行" />
                        </Form.Item>
                    </Col>
                    <Col span={13}>
                        <Form.Item className="script_area" name="script" label="脚本文件" initialValue={data?.script} style={{marginBottom: 0}}>
                            <Input.TextArea rows={19} placeholder="脚本文件" />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Spin>
    </Container>
}

const Container = styled(Modal)`
  .script_area {
    flex-direction: column;
    .ant-form-item-control {
      margin-left: 60px !important;
      .ant-form-item-control-input {
        width: 30vw;
      }
    }
  }
`